<template>
  <el-card
    class="dept-plan work-bench-department__card"
    shadow="never"
    body-style="display: flex; flex-direction: column; height: calc(100% - 20px); padding: 10px 15px;"
  >
    <div class="dept-plan__header work-bench-department__card__header">
      <span class="work-bench-department__card__title dept-plan__title">巡检统计</span>
    </div>
    <div class="work-bench-department__card__body dept-plan__body">
      <div class="dept-plan__day">{{ day }}</div>
      <div class="dept-plan__progress-title-wrapper">
        <div class="dept-plan__progress-title">巡检计划完成率</div>
        <div class="dept-plan__progress-num">{{ plan }}%</div>
      </div>
      <el-progress class="dept-plan__progress" :stroke-width="10" :percentage="plan" :show-text="false" />
      <div class="dept-plan__progress-title-wrapper">
        <div class="dept-plan__progress-title">巡检点位完成率</div>
        <div class="dept-plan__progress-num">{{ point }}%</div>
      </div>
      <el-progress class="dept-plan__progress" :stroke-width="10" :percentage="point" :show-text="false" />
      <div class="dept-plan__progress-title-wrapper-2">
        <span style="margin-right: 5px">巡检转工单(完成/未完成):</span>
        <span style="color: #409eff; font-weight: bold">{{ rate1 }}</span>
        <span>个/</span>
        <span style="color: #f3b844; font-weight: bold">{{ rate2 }}</span>
        <span>个</span>
      </div>
    </div>
  </el-card>
</template>

<script>
// ============================== 导入依赖 ============================== //

import dashboardDeptApi from '@admin/views/Workbench/WorkbenchDepartment/api'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'DeptPlan',

  props: {
    /**
     * 部门ID
     */
    organId: { type: String, default: '' },
  },

  data() {
    return {
      /**
       * 日期
       */
      day: '',
      /**
       * 巡检计划完成率
       */
      plan: 0,
      /**
       * 巡检点位完成率
       */
      point: 0,
      /**
       * 巡检转工单完成数
       */
      rate1: 0,
      /**
       * 巡检转工单未完成数
       */
      rate2: 0,
    }
  },

  methods: {
    /**
     * @function 巡检统计
     * @param {String} organId -部门ID
     */
    queryDeptPlanPie(organId) {
      if (!organId) return

      dashboardDeptApi.queryDeptPlanPie({ organId }).then((res) => {
        const first = res.info[0] || {}
        const firstHead = first.head || []
        const firstInfo = first.info || []
        this.day = firstHead.filter((item) => item.name === 'date')[0].label
        this.plan = firstInfo.filter((item) => item.name === 'plan')[0].value
        this.point = firstInfo.filter((item) => item.name === 'point')[0].value
        this.rate1 = firstInfo.filter((item) => item.name === 'rate1')[0].value
        this.rate2 = firstInfo.filter((item) => item.name === 'rate2')[0].value
      })
    },
  },

  mounted() {
    this.queryDeptPlanPie(this.organId)
  },

  watch: {
    organId(newVal) {
      this.queryDeptPlanPie(newVal)
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
